import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import { Router, Route, Link } from 'yo-router'
import yoHistory from '$common/history';
import './index.scss';
import projectData from './project.json';


class HomePage extends Component {
    render() {
        return (
            <div className="yo-flex">
                <Header title="项目简介" left={false} />
                <Scroller extraClass="flex" onScroll={() => {
                }}>
                    <div className="m-content flex">

                        {
                            projectData.map((item, index) =>


                                <div class="yo-card" className="bottompx" key={index}>
                                    <h4 class="hd">{index + 1}.{item.name}</h4>
                                    <h4 class="hd">{item.category}</h4>
                                    <div className='projectimg'>
                                        {<img src={item.image} className='imgsize' />}
                                    </div>
                                    <div class="bd introduction" className="introduction">
                                        <p><span>项目简介 ：</span>{item.description}</p>
                                        <p><span>项目过程 : </span>{item.detail}</p>
                                        <p><span>使用语言 : </span>{item.tech}</p>
                                    </div>

                                </div>

                            )
                        }

                        {/* <ul class="yo-list yo-list-group">
                            {
                                projectData.map((item, index) =>


                                    <li className="item" key={index}>
                                        <div>
                                        <h4>{index+1}.{item.name}</h4>
                                        </div>
                                        <div className='projectimg'>
                                            {<img src={item.img} className='imgsize' />}
                                        </div>
                                        <div className='introduction'>
                                            <p4>{item.introduction}</p4>
                                        </div>
                                    </li>

                                )
                            }
                        </ul> */}
                    </div>
                </Scroller>

                <ul className="yo-tab yo-tab-view">
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/');
                            }}
                        >
                            <div className='tabitem'>
                                首页
          </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/skill');
                            }}
                        >
                            <div className='tabitem'>
                                技能
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico item-on">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/project');
                            }}
                        >
                            <div className='tabitem'>
                                项目
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/minemy');
                            }}
                        >
                            <div className='tabitem'>
                                首页
    </div>
                        </Touchable>
                    </li>
                </ul>
            </div>
        )
    }
}

export default HomePage;
